<template>
  <!-- 使用共享组件 -->
  <!-- <TestButton label="点击我（来自共享组件库）" />
  <TestDiv /> -->
  <!-- <div class="content">
    test
    <button>点击</button>
  </div>

  <div class="test">test</div>
  <div class="error">错误信息</div>
  <Com title="测试"/> -->
  <!-- <Flowchart/> -->
  <CodeMirror />
</template>

<script setup>
import { h } from "vue";
import CodeMirror from "@/components/CodeMirror/index.vue";
import Flowchart from "@/views/Flowchart.vue";
// 从共享包导入组件
// import { TestButton, TestDiv } from '@my-org/ui-components';
// import { getData } from "../../../common/test"
// getData()
const Com = (props) => {
  return h("div", { class: "test" }, props.title);
};
</script>

<style lang="scss" scoped>
@forward "./tes.scss";

$color: rgb(255, 255, 255);
$bg-color: rgb(255, 255, 255);
$hover-color: #f99;

@mixin te {
  font-size: 12px;
}

.error {
  border: 1px solid red;
  background-color: #fdd;
}

.content {
  $size: 40px;
  font-size: $size;
  padding: 16px;
  background-color: $bg-color;
  color: $color;

  button {
    font-size: $size;
    @include te;
    @extend .error;

    &:hover {
      background-color: $hover-color;
    }
  }

  .test {
    @include te;
  }
}
</style>
